<!-- 图片搜素 -->
<template>
  <div id="PicFind">
    <Head
      title="图片"
      BackType4="true"
      headChang="true"
      :TxtRight="headTxtRight"
      NoticeType10="true"
      v-on:CustomEvevt="EntireChoose"
    ></Head>
    <div id="Main">
      <div class="ImgList">
        <van-checkbox-group class="ImgBox" v-for="(item,index) in lists" v-model="result" :key="index">
          <img :src="item.img" alt @click="toggle(index)">
          <van-checkbox :key="item.name" :name="item.name" ref="checkboxes" v-show="choose"></van-checkbox>
        </van-checkbox-group>
      </div>
      <ul v-show="!choose" class="FooterBox">
        <li>
          <img src="../assets/img/Forwarding_x.png" alt>
        </li>
        <li>
          <img src="../assets/img/Collection_x.png" alt>
        </li>
        <li>
          <img src="../assets/img/Del_x.png" alt>
        </li>
        <li>
          <img src="../assets/img/Download_x.png" alt>
        </li>
      </ul>
      <ul v-show="choose" class="FooterBox">
        <li>
          <img src="../assets/img/Forwarding1_x.png" alt @click="Forwarding">
        </li>
        <li>
          <img src="../assets/img/Collection1_x.png" alt @click="Collection">
        </li>
        <li>
          <img src="../assets/img/Del1_x.png" alt @click="Del">
        </li>
        <li>
          <img src="../assets/img/Download1_x.png" alt @click="Download">
        </li>
      </ul>
    </div>
  </div>
</template>
  
<script>
import Head from "../components/Head.vue";
import { Checkbox, CheckboxGroup } from "vant";
import { Cell, CellGroup } from "vant";
import { Button } from "vant";
import { Dialog } from "vant";
import Img from "../assets/img/messageAvatar.png";

export default {
  data() {
    return {
      choose: false,
      headTxtRight: "选择",
      lists: [
        { img: Img, name: "pic" },
        { img: Img, name: "pic1" },
        { img: Img, name: "pic2" },
        { img: Img, name: "pic3" },
        { img: Img, name: "pic4" }
      ],
      result: []
    };
  },
  components: {
    Head,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Dialog.name]: Dialog
  },
  methods: {
    toggle(index) {
      if(this.choose){
        this.$refs.checkboxes[index].toggle();
      }else{
        this.result = [];
      }
    },
    EntireChoose() {
      if (this.headTxtRight == "取消") {
        this.headTxtRight = "选择";
        this.choose = false;
        this.result = [];
      } else {
        this.headTxtRight = "取消";
        this.choose = true;
      }
    },
    Forwarding() {},
    Collection() {},
    Del() {
      console.log(this.result)
      if (this.result == undefined || this.result.length <= 0) {
        return;
      }
      Dialog.confirm({
        title: "提示",
        message: "确定删除图片？"
      })
        .then(() => {
          this.lists = this.lists.filter(val => {
            return val.choose != true;
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    Download() {}
  },
  // created() {
  //   this.result = this.lists;
  // }
};
</script>


<style lang="less" scoped>
#PicFind {
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: #2e3132;
    .ImgList {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 5px;
      .ImgBox {
        position: relative;
        margin-top: 5px;
        margin-left: 5px;
        width: 180px;
        height: 180px;
        border-radius: 10px;
        img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .van-checkbox {
          position: absolute;
          top: 5px;
          left: 5px;
        }
      }
    }
    .FooterBox {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 750px;
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #000000;
      opacity: 0.6;
      img {
        display: block;
        width: 36px;
        height: 36px;
      }
    }
  }
}
</style>
  